<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap 5</title>
  <!-- Css link -->
  <link rel="stylesheet" href="style.css" />
  <!-- Bootstrap 5 css -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand text-capitalize" href="#">kishanlal choudhary</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-capitalize" href="about.html">About us</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Services
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li>
                <a class="dropdown-item" href="#">Something else here</a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link text-capitalize" href="gallery.html">gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-capitalize" href="contact.html">contact us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- About us section start-->
  <section class="main_heading my-5">
    <div class="text-center">
      <h1>About Us</h1>
      <hr class="w-25 mx-auto" />
    </div>
    <div class="container">
      <div class="row my-5">
        <div class="col-lg-6 col-md-6 col-12 col-xxl-6 d-flex justify-content-end">
          <img src="Images\img4.jpg" alt="about images" class="img-fluid about_image" />
        </div>
        <div
          class="col-lg-6 col-md-6 col-12 col-xxl-6 my-3 d-flex justify-content-center align-items-start flex-column">
          <h1>My Journey</h1>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste
            rem, necessitatibus dignissimos modi voluptatibus quibusdam
            aperiam cupiditate blanditiis exercitationem corrupti, libero
            eaque dicta maiores odit ducimus rerum nihil! Culpa, pariatur eius
            officiis atque deserunt sapiente? Blanditiis dolorem expedita quam
            est odit nam, cum quo nihil.
          </p>
          <button type="button" class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-placement="right"
            title="Who i am">
            Check More
          </button>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div id="navbar-example" style="position: relative">
          <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="nav nav-pills">
              <li class="nav-item">
                <a class="nav-link" href="#scrollspyHeading1">First</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#scrollspyHeading2">Second</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
                  aria-expanded="false">Dropdown</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#scrollspyHeading3">Third</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#scrollspyHeading4">Fourth</a>
                  </li>
                  <li>
                    <hr class="dropdown-divider" />
                  </li>
                  <li>
                    <a class="dropdown-item" href="#scrollspyHeading5">Fifth</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example"
            tabindex="0" style="height: 300px; overflow-y: scroll">
            <h4 id="scrollspyHeading1">First heading</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Provident optio ea minima repudiandae, temporibus eius hic
              dolores non, perferendis illum corrupti labore unde veniam
              maxime officia rem incidunt ab autem eligendi officiis doloribus
              debitis quas. Nostrum facere nemo perferendis iste hic fuga,
              nobis ducimus Lorem ipsum dolor sit amet consectetur adipisicing
              elit. Unde adipisci aperiam vero sequi molestias, rerum
              reprehenderit ab inventore, deleniti, corporis assumenda qui
              vitae molestiae similique architecto? Nobis earum maxime
              molestias, sunt harum inventore, aspernatur possimus enim
              consectetur sint veniam, minima facilis perferendis dolore
              necessitatibus recusandae!
            </p>
            <h4 id="scrollspyHeading2">Second heading</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Provident optio ea minima repudiandae, temporibus eius hic
              dolores non, perferendis illum corrupti labore unde veniam
              maxime officia rem incidunt ab autem eligendi officiis doloribus
              debitis quas. Nostrum facere nemo perferendis iste hic fuga,
              nobis ducimus Lorem ipsum dolor sit amet consectetur adipisicing
              elit. Unde adipisci aperiam vero sequi molestias, rerum
              reprehenderit ab inventore, deleniti, corporis assumenda qui
              vitae molestiae similique architecto? Nobis earum maxime
              molestias, sunt harum inventore, aspernatur possimus enim
              consectetur sint veniam, minima facilis perferendis dolore
              necessitatibus recusandae!
            </p>
            <h4 id="scrollspyHeading3">Third heading</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Provident optio ea minima repudiandae, temporibus eius hic
              dolores non, perferendis illum corrupti labore unde veniam
              maxime officia rem incidunt ab autem eligendi officiis doloribus
              debitis quas. Nostrum facere nemo perferendis iste hic fuga,
              nobis ducimus Lorem ipsum dolor sit amet consectetur adipisicing
              elit. Unde adipisci aperiam vero sequi molestias, rerum
              reprehenderit ab inventore, deleniti, corporis assumenda qui
              vitae molestiae similique architecto? Nobis earum maxime
              molestias, sunt harum inventore, aspernatur possimus enim
              consectetur sint veniam, minima facilis perferendis dolore
              necessitatibus recusandae!
            </p>
            <h4 id="scrollspyHeading4">Fourth heading</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Provident optio ea minima repudiandae, temporibus eius hic
              dolores non, perferendis illum corrupti labore unde veniam
              maxime officia rem incidunt ab autem eligendi officiis doloribus
              debitis quas. Nostrum facere nemo perferendis iste hic fuga,
              nobis ducimus Lorem ipsum dolor sit amet consectetur adipisicing
              elit. Unde adipisci aperiam vero sequi molestias, rerum
              reprehenderit ab inventore, deleniti, corporis assumenda qui
              vitae molestiae similique architecto? Nobis earum maxime
              molestias, sunt harum inventore, aspernatur possimus enim
              consectetur sint veniam, minima facilis perferendis dolore
              necessitatibus recusandae!
            </p>
            <h4 id="scrollspyHeading5">Fifth heading</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Provident optio ea minima repudiandae, temporibus eius hic
              dolores non, perferendis illum corrupti labore unde veniam
              maxime officia rem incidunt ab autem eligendi officiis doloribus
              debitis quas. Nostrum facere nemo perferendis iste hic fuga,
              nobis ducimus Lorem ipsum dolor sit amet consectetur adipisicing
              elit. Unde adipisci aperiam vero sequi molestias, rerum
              reprehenderit ab inventore, deleniti, corporis assumenda qui
              vitae molestiae similique architecto? Nobis earum maxime
              molestias, sunt harum inventore, aspernatur possimus enim
              consectetur sint veniam, minima facilis perferendis dolore
              necessitatibus recusandae!
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- About us section end -->

  <!-- footer start -->
  <footer class="bg-secondary text-center text-white py-3">
    <p>@copyright Kishanlal Choudhary</p>
  </footer>
  <!-- footer end -->

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
    crossorigin="anonymous"></script>
  <script type="text/javascript">
    var tooltipTriggerList = [].slice.call(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    var scrollSpy = new bootstrap.ScrollSpy(document.body, {
      target: "#navbar-example2",
    });
  </script>
</body>

</html>